Routing

ה-routing מאפשר לנו ניווט באפליקציה. באופן בסיסי יש 3 שלבים ליצירת routing.

ליצור מערך של routes.
לייבא את ספריית routes.
לייבא את RouterModule.

app.module.ts
import { RouterModule, Routes } from '@angular/router';
const appRoute: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'courses', component: CoursesComponent },
  { path: '**', component: ErrorPageComponent },

];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ContactComponent,
    CoursesComponent,
    ErrorPageComponent,

  ],
  providers: [UserService],
  bootstrap: [AppComponent],
  imports: [BrowserModule, RouterModule.forRoot(appRoute)],
})

אחרי שייצרנו את ה-routes צריך לשים אותם בקובץ ה-html.

במבנה של העמוד הזה יש לנו את החלק העליון שהוא ניווט לעמודים המתאימים ואז את router-outlet שמכיל את התוכן של הקומפוננטה שאליה אנחנו מנווטים.

app.component.html
<div class="container">
  <header class="d-flex justify-content-center py-3">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a routerLink="about" routerLinkActive="active" class="nav-link"
          >About</a
        >
      </li>
      <li class="nav-item">
        <a routerLink="contact" routerLinkActive="active" class="nav-link"
          >Contact</a
        >
      </li>
      <li class="nav-item">
        <a routerLink="courses" routerLinkActive="active" class="nav-link"
          >Courses</a
        >
      </li>
    </ul>
  </header>

  <div class="container">
    <router-outlet></router-outlet>
  </div>
</div>

כדי לסמן את הכתובת של הקישור משתמשים ב-routerLink במקום ב-href.

כדי להציג את הקישור הפעיל משתמשים ב-routerLinkActive.

כדי שהקישור הראשי לא יהיה פעיל כשגם הקישורים האחרים עובדים, נשים בו [routerLinkActiveOptions]="{exact: true}".

מסלול מוחלט ויחסי

אם אנחנו משתמשים ב-/ כשאנחנו כותבים את מסלול הקישור, המסלול יהיה מוחלט לנתיב האתר ויעבוד ביחס לנתיב הראשי שלנו.

אם לא משתמשים ב-/, המסלול יהיה יחסי ויתייחס לנתיב הפעיל כרגע.

ניווט על ידי קוד

אפשר לנווט על ידי קישורים או להפעיל את הניווט מתוך ה-class/

comp.html
<a (click)="navigateToHome()" class="mb-4">Go to homepage</a>
<button (click)="navigateToHome()" class="mb-4">Go to homepage</button>

פונקציית הניווט navigate מקבלת מערך עם השם של ה-route. הפונקציה navigateByUrl מקבלת את הנתיב כמחרוזת.

comp.ts
constructor(private route: Router){}

navigateToHome(){
    this.route.navigate(['Home']);
    this.route.navigateByUrl('Home');
}

כדי להשתמש בנתיב יחסי, אנחנו צריכים להשתמש בנתיב בו אנחנו נמצאים עכשיו.

comp.ts
constructor(private route: Router, private activatedRoute: ActivatedRoute) {}

navigateToHome() {
    this.route.navigate(['Home'], {relativeTo: this.activatedRoute});
}

Routing

מסלול מוחלט ויחסי​

ניווט על ידי קוד​

מסלול מוחלט ויחסי

ניווט על ידי קוד